<style>
  .weui-bar__item--on .iconfont {
    color: #04BE02;
  }

</style>
<div class="weui-tab">
  <div class="weui-tabbar">
    <a href="/mobile" class="weui-tabbar__item weui-bar__item--on">
      <div class="weui-tabbar__icon">
        <i class="iconfont icon-shield-check-o"></i>
      </div>
      <p class="weui-tabbar__label">安全常识</p>
    </a>
    <a href="/mobile/study_pre.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <i class="iconfont icon-exec"></i>
      </div>
      <p class="weui-tabbar__label">顺序练习</p>
    </a>
    <a href="/mobile/test_pre.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <i class="iconfont icon-kaoshi1"></i>
      </div>
      <p class="weui-tabbar__label">模拟考试</p>
    </a>
    <a href="/mobile/my.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <i class="iconfont icon-wode"></i>
      </div>
      <span class="weui-badge js-unread-count hide"
            style="position: absolute;">0</span>
      <p class="weui-tabbar__label">我的</p>
    </a>
  </div>
</div>
<script>
  var footer = $("#footer");
  var a = footer.find(".weui-tabbar__item");
  var url = window.location.pathname;
  var s1 = ['/mobile/','/mobile/index.html', '/mobile/view.html']
    , s2 = ['/mobile/study_pre.html']
    , s3 = ['/mobile/test_pre.html']
    , s4 = ['/mobile/notice.html', '/mobile/my.html']
    , actives = [s1, s2, s3, s4];
  a.removeClass("weui-bar__item--on");
  for (var i in actives) {
    if (actives[i].indexOf(url) >= 0) {
      a.eq(i).addClass("weui-bar__item--on");
      break;
    }
  }

  //
  //js-unread-count
  js_request('/portal/notice/unReadIds', {}, function (result) {
    if(result.code==1){
      var ids=result.data;
      var count=ids.length;
      var obj=$(".js-unread-count");
      if(count>0){
        obj.removeClass('hide').text(count);
      }

    }

  });


</script>
